<template>
  <div class="components-container board">
    <!-- 导航条配置 -->
    <div>
      <draggable
        class="list-group"
        tag="ul"
        v-model="menu"
        v-bind="dragOptions"
        @start="isDragging = true"
        @end="isDragging = false"
      >
        <transition-group type="transition" name="flip-list">
          <li
            class="list-group-item"
            v-for="element in menu"
            :key="element.menu_id"
          >
            <img v-if="element.icon" src="https://pro-ujy.xiaoheiban.cn/46f149f93ef6436c837f5f9c284609d0.jpg" alt="图标">
            <span class="name">{{element.name}}</span>
            <el-popover
              placement="bottom-end"
              trigger="click"
              style="width: 90px;"
              v-if="element.icon"
            >
              <ul>
                <li><el-button type="text" @click="edit(element.id)">更换图标</el-button></li>
                <li><el-button type="text" @click="edit(element.id)">修改名称</el-button></li>
                <li><el-button type="text" @click="edit(element.id)">添加子栏目</el-button></li>
                <li><el-button type="text" @click="del(element.id)">删除</el-button></li>
              </ul>
              <i v-if="element.icon" slot="reference" class="el-icon-arrow-down"></i>
            </el-popover>
          </li>
        </transition-group>
      </draggable>
    </div>

    <div>
      <!-- 二级分类配置 -->
      <draggable class="module list-group" element="ul" v-model="module" :options="dragOptions" @start="isDragging=true" @end="isDragging=false">
        <transition-group type="transition" :name="'flip-list'">
          <li class=" list-group-item" v-for="item in module" :key="item.name">
            <span class="text">{{item.name}}</span>
          </li>
        </transition-group>
      </draggable>
      <div class="board-column" v-for="item in module" :key="item">
        <div class="title">{{item.name}}</div>
        <draggable class="board-column-content" element="ul" v-model="item.child" :options="dragOptions" @start="isDragging=true" @end="isDragging=false">
          <li class="board-item" v-for="child in item.child" :key="child">
            <img v-if="child.icon" src="https://pro-ujy.xiaoheiban.cn/46f149f93ef6436c837f5f9c284609d0.jpg" alt="图标">
            <span class="name">{{child.name}}</span>
            <el-popover
              placement="bottom-end"
              trigger="click"
              style="width: 90px;"
              v-if="child.icon"
            >
              <ul>
                <li><el-button type="text" @click="edit(element.id)">修改名称</el-button></li>
                <li><el-button type="text" @click="del(element.id)">删除</el-button></li>
              </ul>
              <i  v-if="child.icon" slot="reference" class="el-icon-arrow-down"></i>
            </el-popover>
          </li>
          <li class="addMoudle" sort=false @click="addMoudle(item.type_id)">
            增加模块
          </li>
        </draggable>
      </div>
    </div>
    <pre>{{module}}</pre>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'DragKanbanDemo',
  components: {
    draggable
  },
  data () {
    return {
      group: 'module',
      menu: [
        {
          'menu_id': 1,
          'name': '办公应用',
          'icon': '1'
        },
        {
          'menu_id': 2,
          'name': '校园应用',
          'icon': '2'
        },
        {
          'menu_id': 3,
          'name': '大数据统计',
          'icon': '3'
        },
        {
          'menu_id': 4,
          'name': '管理配置',
          'icon': '4'
        }
      ],
      module: [
        {
          'type_id': 1,
          'name': '通讯',
          'child': [
            { 'id': 1, 'name': '模块1', 'icon': '1', 'sort': true },
            { 'id': 2, 'name': '模块2', 'icon': '1', 'sort': true },
            { 'id': 3, 'name': '模块3', 'icon': '1', 'sort': true }
            // {"id":null,"name":"新增模块","icon":"","sort":"false"},
          ]
        },
        {
          'type_id': 2,
          'name': '调度',
          'child': [
            { 'id': 4, 'name': '模块4' },
            { 'id': 5, 'name': '模块5' }
          ]
        },
        {
          'type_id': 3,
          'name': '信息',
          'child': [
            { 'id': 6, 'name': '模块6' },
            { 'id': 7, 'name': '模块7' }
          ]
        }
      ]
    }
  },
  methods: {
    addMoudle (id) {
      alert(id)
    }
  },
  computed: {
    dragOptions () {
      return {
        animation: 0,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      };
    }
  }
}
</script>
<style lang="scss">
  .board-column {
    min-height: 100px;
    height: auto;
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;

    .board-column-header {
      height: 50px;
      line-height: 50px;
      width: 180px;
      overflow: hidden;
      padding: 0 20px;
      border-radius: 8px;
      box-sizing: border-box;
      border: 1px solid #ddd;

      i {
        position: relative;
        left: 60%;
        top: -20%;
      }
    }

    .board-column-content {
      width: 100%;
      height: auto;
      overflow: hidden;
      min-height: 60px;
      margin: 10px 0 10px 0;
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;

      .board-item {
        cursor: move;
        width: 236px;
        height: 70px;
        line-height: 55px;
        margin: 40px 40px 0 30px;
        border-radius: 8px;
        background-color: #fff;
        text-align: left;
        padding: 5px 10px;
        box-sizing: border-box;
        border: 1px solid #ddd;

        i {
          position: relative;
          left: 45%;
          top: -30%;
          cursor: pointer
        }

        img {
          width: 52px;
          height: 52px;
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }
    }
  }
  .addMoudle {
    cursor: move;
    width: 236px;
    height: 70px;
    line-height: 55px;
    margin: 40px 40px 0 30px;
    border-radius: 8px;
    background-color: #fff;
    text-align: left;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
  }
  .board {
    width: 100%;
    margin-left: 20px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: flex-start;

    > div{
      background-color: #fff;
      border-radius: 10px;
      margin-bottom: 15px;
      padding: 40px 40px 0px 40px;
    }
  }

  .flip-list-move {
    transition: transform 0.5s;
  }

  .no-move {
    transition: transform 0s;
  }

  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }

  .list-group {
    min-height: 100px;
    height: auto;
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;

    .list-group-item {
      cursor: move;
      width: 236px;
      height: 70px;
      line-height: 25px;
      margin: 0px 40px 40px 0px;
      border-radius: 8px;
      background-color: #fff;
      text-align: left;
      padding: 20px 30px;
      box-sizing: border-box;
      border: 1px solid #ddd;
      float: left;
    }

    i {
      position: relative;
      left: 45%;
      top: -50%;
      cursor: pointer
    }

    img {
      width: 20px;
      vertical-align: middle;
      margin-right: 10px;
    }

  }

</style>
